<template>
  <div class="tab">
    <div
      v-for="(item, index) in list"
      :key="index"
      class="tab-item"
      :class="{
        'tab-item__active': item.active
      }"
      @click="tabChange(item)"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
import {
  cloneDeep
} from 'lodash-es'
export default {
  props: {
    tabList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      list: []
    }
  },
  watch: {
    tabList: {
      handler(list) {
        this.list = list
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    tabChange(obj) {
      this.list.forEach(item => item.active = false)
      obj.active = true
      this.$emit('tabChange', obj, cloneDeep(this.list))
    }
  }
}
</script>

<style lang="scss" scoped>
	.tab {
		display: flex;
		align-items: center;
		height: 60rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 30rpx;
		margin-top: 44rpx;

		&-item {
			flex: 1;
			flex-shrink: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
      font-size: 28rpx;
      color: rgba(0,0,0,0.5);

			&__active {
				background: #78FFE6;
				border-radius: 30rpx;
        font-weight: 600;
        font-size: 32rpx;
        color: #000000;
			}
		}
	}
</style>
